<template>
    <div id="content">
        <div class="block">
            <el-image :src="bg1" fit="cover" class="bg1"></el-image>
            <el-carousel height="300px" arrow="always">
                <el-carousel-item v-for="item in bos" :key="item.id">
                    <el-image :src="item.url" fit="cover" style="height: 300px"></el-image>
                </el-carousel-item>
            </el-carousel>

        </div>
        <div class="contain">
            <div class="box1">
                <div class="title">
                    <div class="title-left">
                        <div class="icon"><i class="el-icon-service"></i></div>
                        <span class="tit1"><span>精选</span>推荐</span>
                        <span class="ti1" v-for="item in titles" :key="item">
                       <span class="line">|</span> <router-link to="/Home/contentTr">{{item}} </router-link></span>
                        <el-button type="text" class="button" @click="moreMusicAlbum">更多</el-button>
                    </div>
                    <div class="title-right">
                        <div class="icon"><i class="el-icon-service"></i></div>
                        <span class="tit1"><span>热门</span>榜单</span>
                        <el-button type="text" class="button" @click="bangMusic">更多</el-button>
                    </div>
                </div>
                <Box1 :musicList="musicList"
                      :officialListDetail="officialListDetail"
                      @clickListCardItem="clickListCardItem">
                </Box1>
            </div>
            <div class="box2">
                <div class="title">
                    <div class="title-left">
                        <div class="icon"><i class="el-icon-service"></i></div>
                        <span class="tit1"><span>新歌</span>首发</span>
                        <span class="ti1" v-for="item in titles1" :key="item">
                        <span class="line">|</span> <router-link to="/Home/contentTr">{{item}} </router-link></span>
                    </div>
                </div>
                <Box2 :newSong="newSong"></Box2>
            </div>
            <div class="box4">
                <div class="title">
                    <div class="title-left">
                        <div class="icon"><i class="el-icon-service"></i></div>
                        <span class="tit1"><span>新碟</span>上架</span>
                    </div>
                    <el-button type="text" class="button1" @click="moreNewAlbum">更多</el-button>
                </div>
                <Box4 :getAlbums="newAlbum">
                </Box4>
            </div>
            <div class="box3">
                <div class="title">
                    <div class="title-left">
                        <div class="icon"><i class="el-icon-service"></i></div>
                        <span class="tit1"><span>热门</span>歌手</span>
                        <span class="ti1" v-for="item in titles1" :key="item">
                        <span class="line">|</span> <router-link to="/Home/contentFour">{{item}} </router-link></span>
                    </div>
                    <el-button type="text" class="button" @click="moreSinger">更多</el-button>
                </div>
                <Box3 :hotSinger="hotSinger"
                      @clickSingerItem="clickSingerItem"
                ></Box3>
            </div>
        </div>
    </div>
</template>

<script>
    import Box1 from "@/components/Main/Box1";
    import Box2 from "@/components/Main/Box2";
    import Box3 from "@/components/Main/Box3";
    import Box4 from "@/components/Main/Box4";
    import {handleMusicTime} from "@/plugins/utils";

    export default {
        name: "Content",
        components: {Box1, Box2, Box3, Box4},
        data() {
            return {
                bos: [
                    {
                        id: 1,
                        url: 'http://p1.music.126.net/7nvYJ93qrFftUunQNY1yzA==/109951166699716439.jpg?imageView&quality=89'
                    },
                    {
                        id: 2,
                        url: 'http://p1.music.126.net/ZY69b92tocg3DAfxblo5Uw==/109951166720719048.jpg?imageView&quality=89'
                    },
                    {
                        id: 3,
                        url: 'http://p1.music.126.net/UCx8zCjBFj17tyQNl4pywg==/109951166720716001.jpg?imageView&quality=89'
                    },
                    {
                        id: 4,
                        url: 'http://p1.music.126.net/zip8XlHuwHmcbxq0SG03xQ==/109951166700249608.jpg?imageView&quality=89'
                    },
                    {
                        id: 5,
                        url: 'http://p1.music.126.net/aeXyuVZBvLXTChJDHtA_GQ==/109951166699812383.jpg?imageView&quality=89'
                    },
                    {
                        id: 6,
                        url: 'http://p1.music.126.net/pyHFrQKUSDB_em0rcGzKQg==/109951166725831121.jpg?imageView&quality=89'
                    }
                ],
                bg1: require('./../../img/background/33.jpeg'),
                titles: ['华语', '流行', '摇滚', '电子'],
                titles1: ['华语', '韩国', '日本', '欧美'],
                musicList: [],
                newSong: [],
                hotSinger: [],
                officialList: [],
                officialListDetail: [],
                newAlbum: []
                // // 轮播图数据
                //  bannerData: [],
            }
        },
        methods: {
            moreMusicAlbum(){
                this.$router.push('/Home/contentTr');
            },
            moreNewAlbum() {
                this.$router.push('/Home/contentFive');
            },
            bangMusic() {
                this.$router.push('/Home/contentTwo');
            },
            moreSinger() {
                this.$router.push('/Home/contentFour');
            },
            // 请求推荐歌单数据的前十个
            async getMusicList() {
                await this.$request("/personalized", {limit: 8}).then((res) => {
                    // console.log(res);
                    this.musicList = res.data.result;
                });
            },
            // 请求榜单的前四个
            async getAllRankings() {
                await this.$request("/toplist").then((res) => {
                    // console.log(res);
                    this.officialList = res.data.list.slice(0, 4);
                })
            },

            // 根据传来的 id 查询歌单
            async getMusicListDetail(id) {
                let result = await this.$request("/playlist/detail", {id});
                console.log(result);
                result = result.data.playlist;
                // 对时间进行处理
                result.tracks.forEach((item, index) => {
                    result.tracks[index].dt = handleMusicTime(item.dt);
                });
                this.officialListDetail.push(result);
            },
            //请求新歌首发
            async getNewSong() {
                await this.$request("/personalized/newsong", {limit: 18}).then((res) => {
                    // console.log(res);
                    this.newSong = res.data.result;
                });
            },
            //请求新碟上架
            getNewAlbums() {
                this.$request("/album/newest").then((res) => {
                    console.log(res);
                    this.newAlbum = res.data.albums.slice(0, 9);
                });
            },
            //请求最热门歌手
            getHotSinger() {
                this.$request("/top/artists", {limit: 10}).then((res) => {
                    // console.log(res);
                    this.hotSinger = res.data.artists;
                });
            },
            // 点击歌单封面的回调
            clickListCardItem(id) {
                console.log(id);
                this.$router.push({name: "musicListDetail", params: {id}});
            },
            // 点击歌手封面的回调
            clickSingerItem(id) {
                console.log(id);
                this.$router.push({name: "singerDetail", params: {id}});
            },

        },
        async created() {
            this.getMusicList();
            await this.getAllRankings();
            this.officialList.forEach((item) => {
                this.getMusicListDetail(item.id);
            });
            this.getNewSong();
            this.getNewAlbums();
            this.getHotSinger();
        },
    }
</script>

<style scoped>
    #content {
        background-color: #f7f7f7;
    }

    .contain {
        width: 900px;
        height: 100%;
        margin: auto;
        border-left: 1px #cccccc solid;
        border-right: 1px #cccccc solid;
        overflow-y: hidden;
        background-color: white;
    }
    .block {
        display: flex;
        justify-content: center;
        position: relative;
    }

    .block .el-carousel {
        width: 1100px;
    }
    .block .bg1 {
        /*z-index: -2;*/
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0.8;
    }

    /deep/ .el-carousel__item {
        width: 1100px;
        display: flex;
        justify-content: center;
    }

    .el-carousel__item .el-image {
        width: 900px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.21), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
    }

    .box1, .box2, .box3 {
        padding: 20px 10px 0 10px;
    }

    .box1 .button {
        float: right;
        color: #9a9a9a;
        margin-left: 160px;
    }

    .box3 {
        margin-bottom: 40px;
    }

    .box4 .button1,.box3 .button {
        float: right;
        color: #9a9a9a;
        margin-right: 10px;
    }

    .title .icon {
        display: inline;
        font-size: 25px;
        padding: 5px;
        color: #20B2AA;
    }

    .title:after {
        clear: both;
        display: table;
        content: "";
    }

    .title .title-left {
        float: left;
    }

    .title .title-right {
        float: right;
    }

    .title .title-right .button {
        margin-left: 100px;
        color: #9d9d9d;
        font-size: small;
    }

    .contain .tit1 {
        margin-right: 30px;
        font-size: 20px;
    }

    .contain .ti1 a {
        color: #8c8c8c;
        padding: 5px;
        text-decoration: none;
    }

    /deep/ .contain .ti1 a:hover {
        color: #40E0D0;
        text-decoration: underline;
    }

    .contain .line {
        color: #cccccc;
    }

    .contain .tit1 span {
        color: #40E0D0;
    }

</style>
